<template>
<div>
    <el-tag  v-for="(item,  index) in tabsList" :key="index" :closable="item.name  !==  'home'" :effect="$route.name  ===  item.name ? 'dark'+'' : 'plain'+''"
     @click="changetag(item)" @close="deleteClose(item,index)">
      {{  item.label  }}
  </el-tag>
</div>
</template>

<script>
import { mapState,mapMutations } from "vuex"
export default {
    computed: {
        ...mapState('my-tab', ['tabsList'])
    },
    methods: {
        ...mapMutations('my-tab',['closetag']),
        //点击tag跳转页面
        changetag(path){
            this.$router.push(path)
        },
        //点击删除，进行删除
        deleteClose(item,i){
  this.closetag(item)
  console.log(i)
  //删除后的跳转 
   if(item.name!==this.$route.name){
    return
   }
   
   if(i===this.tabsList.length){//最后一项
         //前一项路径
         let path= this.tabsList[i-1].path
    this.$router.push(path)
   }else{
    this.$router.push(this.tabsList[i].path)
   }
        }
       
    }
}
</script>

<style lang="less" scoped>
.el-tag{
    cursor: pointer;
    margin: 5px
}
</style>